<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/product.css" />
</head>
<body class="gray message">
	<div class="mui-content">
	    <div id="slider" class="mui-slider mui-fullscreen" >
	    		<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<a class="mui-control-item mui-active" href="#orderMessage">订单消息</a>
				<a class="mui-control-item" href="#financeMessage">财务消息</a>
				<a class="mui-control-item" href="#serverMessage">系统消息</a>
	    		</div>
	    		<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4" style="top: -2px;">
	    			<div></div>
	    		</div>
	    		<div class="mui-slider-group loading" style="height: 100%;" id="vueMain">
	    			<div id="orderMessage" class="mui-slider-item mui-control-content mui-active" >
	    				<div id="scroll1" class="mui-scroll-wrapper ">
	    					<div class="mui-scroll" style="padding-top: 10px;">
	    						<div v-if="orderMessage.length == 0">
	    							<p style="text-align: center; padding:50px 0">没有订单消息</p>
	    						</div>
	    						<ul v-else class="mui-table-view">
	    							<template v-for="(item,index) in orderMessage">
	    								<li class="mui-table-view-cell mui-media">
		    						        <a href="javascript:;">
		    						            <img class="mui-media-object mui-pull-left" src="../icon/logo.png"  />
		    						            <!--<span class="dian"></span>-->
		    						            <div class="mui-media-body">
		    						            		<div class="name"><span class="mui-pull-right">{{splitDate(item.add_time)}}</span> {{item.title}}</div>
		    						            		<div class="content">
		    						            			{{item.content}}
		    						            		</div>
		    						            </div>
		    						        </a>
		    						    </li>
	    							</template>
	    						</ul>
	    					</div>
	    				</div>
	    			</div>
	    			<div id="financeMessage" class="mui-slider-item mui-control-content" >
	    				<div id="scroll2" class="mui-scroll-wrapper ">
	    					<div class="mui-scroll">
	    						<div v-if="financeMessage.length == 0">
	    							<p style="text-align: center; padding:50px 0">没有财务消息</p>
	    						</div>
	    						<ul v-else class="mui-table-view">
	    							<template v-for="(item,index) in financeMessage">
	    								<li class="mui-table-view-cell mui-media">
		    						        <a href="javascript:;">
		    						            <img class="mui-media-object mui-pull-left" src="../icon/logo.png"  />
		    						            <!--<span class="dian"></span>-->
		    						            <div class="mui-media-body">
		    						            		<div class="name"><span class="mui-pull-right">{{splitDate(item.add_time)}}</span> {{item.title}}</div>
		    						            		<div class="content">
		    						            			{{item.content}}
		    						            		</div>
		    						            </div>
		    						        </a>
		    						    </li>
	    							</template>
	    						</ul>
	    					</div>
	    				</div>
	    			</div>
	    			<div id="serverMessage" class="mui-slider-item mui-control-content" >
	    				<div id="scroll3" class="mui-scroll-wrapper ">
	    					<div class="mui-scroll">
	    						<div v-if="systemMessage.length == 0">
	    							<p style="text-align: center; padding:50px 0">没有系统消息</p>
	    						</div>
	    						<ul v-else class="mui-table-view">
	    							<template v-for="(item,index) in systemMessage">
	    								<li class="mui-table-view-cell mui-media">
		    						        <a href="javascript:;">
		    						            <img class="mui-media-object mui-pull-left" src="../icon/logo.png"  />
		    						            <!--<span class="dian"></span>-->
		    						            <div class="mui-media-body">
		    						            		<div class="name"><span class="mui-pull-right">{{splitDate(item.add_time)}}</span> {{item.title}}</div>
		    						            		<div class="content">
		    						            			{{item.content}}
		    						            		</div>
		    						            </div>
		    						        </a>
		    						    </li>
	    							</template>
	    						</ul>
	    					</div>
	    				</div>
	    			</div>
	    		</div>
	    </div>
	</div>
	
	
<script src="../js/mui-edit.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/mui.pullToRefresh.js"></script>
<script src="../js/mui.pullToRefresh.material.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views, merchant, slideItem = 0, first = 0, last = 15;
	mui.plusReady(function () {
	    plus.webview.currentWebview().addEventListener('show', function(){
	    		views = bexta.getWebview();
	    		merchant = bexta.getStorage(MERCHANT);
	    		bexta.ajax(api.information, function(res){
	    			if( apps ){
	    				if( apps.slideItem == 1 ){
						apps.financeMessage = res;
					}else if( apps.slideItem == 2 ){
						apps.systemMessage = res;
					}else if( apps.slideItem == 0 ){
						apps.orderMessage = res;
					}
					apps.first = res.length;
					mui(document.querySelectorAll('.mui-slider-group .mui-scroll')[apps.slideItem]).pullToRefresh().refresh(true);
					mui('#scroll' + (apps.slideItem+1)).scroll().scrollTo(0,0,100);
	    			}else{
	    				initVue(res);
	    			}
	    		}, {data:{uid:merchant.uid, type:slideItem, firstrow:first, listrow:last}});
	    });
	});
	function initVue(res){
		apps = new Vue({
			el:"#vueMain",
			data:{
				slideItem :slideItem,
				orderMessage:res,
				financeMessage:[],
				systemMessage:[],
				first:res.length,
				last:last
			},
			methods:{
				splitDate : function(v){
					var a = v.split(' ');
					var b = a[0].split('-');
					var c = a[1].split(':');
					return b[1]+'-'+b[2] + ' ' + c[0] + ':' + c[1];
				}
			},
			mounted:function(){
				document.querySelector('.loading').classList.add('loadRun');
				mui('.mui-slider').slider();  
				mui('.mui-scroll-wrapper').scroll();
				//切换
				document.getElementById('slider').addEventListener('slide', function(e) {
					apps.slideItem = e.detail.slideNumber;
					bexta.ajax(api.information, function(res){
						if( apps.slideItem == 1 ){
							apps.financeMessage = res;
						}else if( apps.slideItem == 2 ){
							apps.systemMessage = res;
						}else if( apps.slideItem == 0 ){
							apps.orderMessage = res;
						}
						apps.first = res.length;
						mui(document.querySelectorAll('.mui-slider-group .mui-scroll')[apps.slideItem]).pullToRefresh().refresh(true);
						mui('#scroll' + (apps.slideItem+1)).scroll().scrollTo(0,0,100);
					}, {data:{uid:bexta.getStorage(MERCHANT).uid, type:apps.slideItem, firstrow:0, listrow:last}});
				});
				//上拉
				mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
					mui(pullRefreshEl).pullToRefresh({
						down:{
							callback:function(){
								var that = this;
								bexta.ajax(api.information, function(res){
									if( apps.slideItem == 1 ){
										apps.financeMessage = res;
									}else if( apps.slideItem == 2 ){
										apps.systemMessage = res;
									}else if( apps.slideItem == 0 ){
										apps.orderMessage = res;
									}
									apps.first = res.length;
									that.endPullDownToRefresh();
								}, {data:{uid:bexta.getStorage(MERCHANT).uid, type:apps.slideItem, firstrow:0, listrow:apps.first}});
							}
						},
						up:{
							callback:function(){
								var that = this;
								bexta.ajax(api.information, function(res){
									var len = res.length ;
									if( len == 0 || len < apps.last ){
										that.endPullUpToRefresh(true);
									}else{
										that.endPullUpToRefresh(false);
									}
									if( len != 0 ){
										apps.first += len;
										mui.each(res, function(){
											if( apps.slideItem == 1 ){
												apps.financeMessage.push(this)
											}else if( apps.slideItem == 2 ){
												apps.systemMessage.push(this)
											}else if( apps.slideItem == 0 ){
												apps.orderMessage.push(this)
											}
										});
									}
								}, {data:{uid:bexta.getStorage(MERCHANT).uid, type:apps.slideItem, firstrow:apps.first, listrow:apps.last}});
							}
						}
					});
				});
			}
		});
	}
	
	
</script>
</body>
</html>
